<template>
  <div v-show="show" class="content-1" :style="fontSize">
    <div style="display:flex;justify-content: space-between;padding-top: 20px;align-items: center">
      <el-button type="primary" @click="openCatalog">目录</el-button>
      <div>
        <el-button type="primary" @click="toPlus" :icon="View">+</el-button>
        <el-button type="primary" @click="toMinus" :icon="View">-</el-button>
      </div>
      <div>
        <el-button type="primary" @click="getPrev" :icon="ArrowLeftBold"></el-button>
        <el-button type="primary" @click="getNext">
          <el-icon>
            <ArrowRightBold/>
          </el-icon>
        </el-button>
      </div>
    </div>
    <div style="margin-bottom: 4px;padding-left: 3px;padding-top: 20px">
      <span>{{ this.catalog }}</span>
    </div>
    <span v-html="content"></span>
    <div style="display:flex;justify-content: space-around;padding-top: 20px">
      <el-button type="primary" @click="getPrev" :icon="ArrowLeftBold">上一章</el-button>
      <el-button type="primary" @click="getNext">下一章
        <el-icon>
          <ArrowRightBold/>
        </el-icon>
      </el-button>
    </div>
  </div>
  <!--目录-->
  <el-drawer v-model="drawer"
             direction="ltr"
             size="50%"
             :with-header="false">
    <div class="catalog" @click="toDetail">
      {{ this.name }}
    </div>
    <ul v-infinite-scroll="loadMore"
        :infinite-scroll-immediate="false"
        :infinite-scroll-distance="80"
        class="infinite-list">
      <div v-for="item in catalogs" @click="toContent(item.id,item.catalogName)" class="catalog">
        {{ item.catalogName }}
      </div>
    </ul>
  </el-drawer>
</template>

<script>
import {ArrowRightBold, ArrowLeftBold, Plus, Minus, View} from '@element-plus/icons-vue'
import {get, post} from '../../request/request'
import {content, catalogs, addShelf} from '../../request/api'
import {ElLoading, ElMessage} from "element-plus";

export default {
  name: "Content",
  components: {
    View,
    ArrowLeftBold,
    ArrowRightBold,
    Plus, Minus
  },
  data() {
    return {
      id: '',
      bid: '',
      name: '',
      catalog: '',
      content: '',
      size: this.getFontSize,
      ArrowLeftBold: ArrowLeftBold,
      View: View,
      Plus: Plus,
      Minus: Minus,
      fontSize: {},
      show: false,
      prev: 0,
      next: 0,
      prevName: '',
      nextName: '',
      drawer: false,
      have: false,
      catalogs: [],
      pageNum: 1,
      pageSize: 100,
      first: true,
      last: false,
      canLoad: true
    }
  },
  computed: {
    getFontSize() {
      return this.$store.state.user.font
    },
  },
  created() {
    this.init()
    this.initFont()
  },
  watch: {
    '$route'(to, from) {
      if (to.name === from.name && to.name === 'Content') {
        this.init()
      }
    }
  },
  methods: {
    init() {
      const id = this.$route.params.id
      const bid = this.$route.params.bid
      const name = this.$route.params.name
      const catalog = this.$route.params.catalog
      this.id = id
      this.bid = bid
      this.name = name
      this.catalog = catalog
      this.getContent(id)
    },
    initFont() {
      const size = this.$store.state.user.font
      this.fontSize = {
        'font-size': size + 'px',
        'letter-spacing': '1.5px'
      }
    },
    getContent(id) {
      const loading = ElLoading.service({fullscreen: true})
      get(content + id).then(res => {
        this.content = res.data.content
        this.prev = res.data.prev
        this.next = res.data.next
        this.prevName = res.data.prevName
        this.nextName = res.data.nextName
        this.show = true
        loading.close()
      }).catch(() => {
        loading.close()
      })
    },
    getPrev() {
      if (this.prev === '0') {
        return ElMessage({
          message: '前面没有了',
          type: 'warning',
        })
      } else {
        this.$router.push("/content/" + this.prev + "/" + this.bid + "/" + this.name + "/" + this.prevName)
      }
    },
    getNext() {
      if (this.next === '0') {
        return ElMessage({
          message: '后面没有了',
          type: 'warning',
        })
      } else {
        this.$router.push("/content/" + this.next + "/" + this.bid + "/" + this.name + "/" + this.nextName)
        this.content = null
        this.show = false
      }
    },
    toPlus() {
      let font = Number(this.$store.state.user.font)
      font = font + 1
      this.$store.dispatch('SetFontSize', font).then(() => {
        this.fontSize = {
          'font-size': font + 'px',
          'letter-spacing': '1.5px'
        }
      })
    },
    toMinus() {
      let font = Number(this.$store.state.user.font)
      font = font - 1
      if (font < 15) {
        return
      }
      this.$store.dispatch('SetFontSize', font).then(() => {
        this.fontSize = {
          'font-size': font + 'px',
          'letter-spacing': '1.5px'
        }
      })
    },
    openCatalog() {
      this.drawer = !this.drawer
      this.canLoad = false
      this.getCatalog()
    },
    getCatalog() {
      const data = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }
      get(catalogs + this.bid, data).then(res => {
        const catalogs = this.catalogs
        this.catalogs = catalogs.concat(res.data.content)
        this.first = res.data.first
        this.last = res.data.last
        this.pageNum = this.pageNum + 1
        this.canLoad = true
      })
    },
    loadMore() {
      if (!this.last && this.canLoad) {
        this.canLoad = false
        this.getCatalog()
      }
    },
    toContent(id, name) {
      this.drawer = !this.drawer
      this.$router.push("/content/" + id + "/" + this.bid + "/" + this.name + "/" + name)
    },
    toDetail() {
      this.drawer = !this.drawer
      this.$router.push("/detail/" + this.bid)
    },
  },

}
</script>

<style scoped>
.content-1 {
  align-items: center;
}

.catalog {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  border-bottom: 1px solid #eeeeee;
  align-items: center;
  padding: 10px 2px;
}

.infinite-list {
  height: auto;
  list-style: none;
}

ul {
  padding-inline-start: 0;
}

</style>
